<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    html css检测
1. 要让一个元素不可见且在文档流中不占位，应该使用哪个 CSS 规则？（5分）B

A: display
B: overflow
C: opacity
D: visibility

2. 从四个选项选出不同的一个：（5分）D
<!-- A： <nav>
B： <img>
C： <meta>
D： <canvas> -->


3. 关于label元素，以下说法正确的有：（5分）B
A：label元素可以使用for属性关联表单控件，也可以将表单控件放置在它的内部
B：当使用for属性来关联label元素和表单控件时，label元素的for属性要和表单控件的ID一致
C：如果label元素内嵌套一个a链接，则点击该a链接不会触发页面跳转
D：label元素内部可以嵌套另一个label元素


4. 你是如何理解语义化的？你用过哪些H5新增的标签吗？又有哪些标签被废弃了？（5分）
答：

5. input标签中的name和type属性分别有什么用？（5分）
答：type属性决定了input的作用，name属性是收集的数据放入后台的什么地址

6. css选择器有哪几种？伪元素和伪类是如何使用的？区别是什么？
答：css选择有通配符，标签选择器，后代选择器，ID选择器，伪元素选择器，伪类选择器等
伪元素写样式时采用:first-child,:last-child,:nth-child()等；
伪类通常是需要使用无意义结构是使用的，属性值为::after,::before
7. reset.css 重置样式表的作用？（5分）
答：清除各种浏览器的默认样式
8. css sprite是什么,有什么优缺点?（5分）

9. transition 和 animation 拥有几个属性？使用过程需要注意什么？（5分）
答：transition拥有四个属性，
animation拥有七个属性，使用过程中需要注意

10. 盒子模型的理解、区别和实践用处（5分）
答：盒子模型有两种，一种为怪异盒子模型；一种是w3c标准盒子模型，由外边距+边框+内边距+内容组成，用于网页布局。

11. css中隐藏元素的方法，display:none, visibility:hidden,区别？还有别的方式吗？
答：display：none 
overflow:hidden
list-style:none

12. CSS 三大特性分别是什么？并谈谈你对权重的认识，如何计算？（5分）
答：层叠 优先级 继承
权重决定了属性的样式是否会层叠生效，不同选择器中的样式依赖权重，即权重高着层叠生效
行内样式：1000
ID：100
类名：10
标签：1
通配*：0

13. 响应式bootstrap和自适应rem的原理及其使用场景？（5分）
答：bootstrap的原理即将一行中的元素分为12份，按照盒子比例分配对应的份数就能原比例呈现在不同的用户端中；
rem的原理是通过js动态计算fontsize，
两种都是在为移动端布局时使用的。

14. 页面导入样式时，使用 link 和 @import 有什么区别？


15. 请简单描述scss是什么？优点是什么？你用过scss具体的什么内容？
sass是css的预编译工具，能帮助程序员提升开发效率，
用过sass的@mixin @function 嵌套等

16. bfc是什么？目的是什么？如何触发？使用场景有哪些？
形成一个独立的空间，让空间内的子元素不受影响或者不影响外面的布局
触发条件：
1.float不为none
2.position不为realtive和static
3.overflow设置为auto scroll hidden
可以应用在两个元素需要margin值都体现的情况等。

17. 请制作圆形，矩阵圆形，等腰三角形，不等边的垂直三角形（提示：鼎搜）
<style>
    
    .box5{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }
    .yuanxing{
        width: 100px;
        height: 100px;
        background-color: pink;
        border-radius: 50%;
    }
    .juzhenyuanxing{
        width: 200px;
        height: 100px;
        background-color: pink;
        border-radius: 50px;
    }
    .dengyaosanjiao{
        border-left: 200px solid white;;
        border-bottom:200px solid pink ;
        border-right: 200px solid white;
    }
    .chuizhisanjiao{
        border-bottom:200px solid pink ;
        border-right: 100px solid white;
    }
</style>
<div class="box5">
<div class="yuanxing"></div>
<div class="juzhenyuanxing"></div>
<div class="dengyaosanjiao"></div>
<div class="chuizhisanjiao"></div>

</div>


18. 如何让多个块级元素共行显示，写出不少于3种方案？并写出每种方案的优缺点？
答：
display: inline-block;
float
display:flex
第一种将元素变成行内块元素即可共行显示，但这种方案会导致空白节点以及基线对齐问题
第二种浮动，使用这种方案会导致元素脱离标准流，需在父元素上设置清除浮动
第三种弹性盒子，方便快捷

19. 如何使元素水平垂直居中，请写出不少于3种方案；
<style>
    .box{
        width: 300px;
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: pink;
        
    }
    .son{
        width: 100px;
        height: 100px;
        background-color: skyblue;
    }
</style>
<div class="box">
    <div class="son"></div>
</div>

<style>
    .box2{
        width: 300px;
        height: 300px;
        background-color: pink;
        position: relative;
    }
    .son2{
        width: 100px;
        height: 100px;
        background-color: skyblue;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -50px;
        margin-left: -50px;
    }
</style>

<div class="box2">
    <div class="son2"></div>
</div>

<style>
    .box3{
        width: 300px;
        height: 300px;
        background-color: pink;
        position: relative;
    }
    .son3{
        width: 100px;
        height: 100px;
        background-color: skyblue;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
</style>

<div class="box3">
    <div class="son3"></div>
</div>
20. 如何实现两栏布局中的左定宽右自适应和三栏布局中，左右两边定宽，中间自适应的布局？
<style>
    .box7{
        width: 100%;
        float: left;
    }
    .son7{
        width: 200px;
        height: 200px;
       
        background-color: pink;
    }
    .bro7{
        width: 100%;
        height: 200px;
        margin-left: 200px;
        background-color: yellow;
    }
</style>
<div class="box7">
    <div class="son7"></div>
    <div class="bro7"></div>
</div>
<style>
    .box8{
        width: 100%;
        display: flex;
    }
    .son8{
        width: 100px;
        height: 100px;
        background-color: pink;
    }
    .bro8{
        width: 100%;
        height: 100px;
        background-color: yellow;
    }
    .sis8{
        width: 100px;
        height: 100px;
        background-color: pink;
    }
</style>
<div class="box8">
    <div class="son8"></div>
    <div class="bro8"></div>
    <div class="sis8"></div>
</div>



</body>
</html>